<template>
    <div class="layout-header">
        <!-- 左侧-用户&天气信息 -->
        <div class="left-container">
            <el-dropdown @command="onClickCommand">
                <img class="user" :src="avatorImg" alt="" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="logout">
                            {{ state.username }}：退出登陆
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <div class="split"></div>
            <div class="weather">
                <span class="time">{{ state.weather.time }}</span>
                <img class="weather-icon" :src="state.weather.icon" alt="" />
            </div>
            <div v-if="screenRatio16_9" class="screen-tabs">
                <div class="tab tab-1" :class="{ on: !showLeft || !showRight }" @click="globalStore.changePageLeft(false), globalStore.changePageRight(false)" />
                <div class="tab tab-2" :class="{ on: showLeft && showRight }" @click="globalStore.changePageLeft(true), globalStore.changePageRight(true)" />
            </div>
        </div>
        <!-- 标题 -->
        <div class="center-title">{{ config.systemTitle }}</div>
        <!-- 右侧aqi信息 -->
        <div class="right-container">
            <template v-for="(item, index) in state.right" :key="item.label">
                <div class="split" v-if="index"></div>
                <div class="item">
                    <span class="label">{{ item.label }}</span>
                    <span class="value" :style="{ backgroundColor: item.color }">
                        {{ item.value }}
                    </span>
                    <span class="text" :style="{ color: item.color }">{{ item.levelText }}</span>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import config from '@/config'
import { getPublicImageAssetsFile, removeToken, redirectLogin } from '@/utils/tools'
import { useGlobalStore } from '@/store/global'
import dayjs from 'dayjs'

// 图片资源
const avatorImg = getPublicImageAssetsFile('avator.png')
const fineImg = getPublicImageAssetsFile('fine.png')

// 全局数据
const globalStore = useGlobalStore()
const screenRatio16_9 = computed(() => globalStore.screenRatio16_9)
const showLeft = computed(() => globalStore.showPageLeft)
const showRight = computed(() => globalStore.showPageRight)

// 数据
const state = reactive({
    username: globalStore.userInfo?.name ?? '',
    weather: {
        time: dayjs().format('YYYY.MM.DD HH.mm'),
        icon: fineImg,
    },
    right: [
        {
            label: 'PM₂.₅ ',
            value: 14,
            color: '#30D385',
            levelText: '优',
        },
        {
            label: 'AQI',
            value: 40,
            color: '#30D385',
            levelText: '优',
        },
    ],
})

// 点击左侧命令
const onClickCommand = async (command: string) => {
    if (command === 'logout') {
        removeToken()
        redirectLogin()
    }
}
</script>

<style lang="scss" scoped>
.layout-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    height: 94px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;

    .left-container {
        width: 600px;
        padding-left: 56px;
        display: flex;
        align-items: center;

        .user {
            width: 32px;
            height: 32px;
        }

        .split {
            width: 2px;
            height: 24px;
            opacity: 0.3;
            background: rgba(255, 255, 255, 1);
            margin: 0 32px;
        }

        .weather {
            display: flex;
            align-items: center;

            .time {
                font-family: Oswald;
                font-size: 24px;
                line-height: 24px;
                height: 24px;
                color: rgba(255, 255, 255, 0.8);
                margin-right: 32px;
            }

            .weather-icon {
                width: 32px;
                height: 32px;
            }
        }

        .screen-tabs {
            display: flex;
            width: 178px;
            height: 40px;
            background-image: url('@/assets/imgs/tab/tab_bg_1.png');
            background-size: 100% 100%;
            padding: 5px;
            pointer-events: auto;
            margin-left: 32px;
            .tab {
                flex: 1;
                height: 100%;
                cursor: pointer;
            }
            .tab + .tab {
                margin-left: 5px;
            }
            .tab-1 {
                background-image: url('@/assets/imgs/tab/tab_off_5.png');
                background-size: 100% 100%;
                &.on {
                    background-image: url('@/assets/imgs/tab/tab_on_5.png');
                    background-size: 100% 100%;
                }
            }
            .tab-2 {
                background-image: url('@/assets/imgs/tab/tab_off_6.png');
                background-size: 100% 100%;
                &.on {
                    background-image: url('@/assets/imgs/tab/tab_on_6.png');
                    background-size: 100% 100%;
                }
            }
        }
    }

    .center-title {
        width: 600px;
        font-family: PangMenZhengDao;
        font-size: 56px;
        height: 56px;
        line-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .right-container {
        width: 600px;
        padding-right: 56px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .workbench {
            margin-right: 20px;
            background: url('@/assets/imgs/tab/tab_on_1.png');
            background-size: 100% 100%;
            cursor: pointer;
            line-height: 32px;
            padding: 0 20px;
        }

        .split {
            width: 2px;
            height: 24px;
            opacity: 0.3;
            background: rgba(255, 255, 255, 1);
            margin: 0 16px;
        }

        .item {
            display: flex;
            align-items: center;
            gap: 12px;

            .label {
                font-family: Oswald;
                font-size: 24px;
                height: 24px;
                line-height: 24px;
                color: rgba(255, 255, 255, 0.8);
            }

            .value {
                border-radius: 4px;
                padding: 4px 6px;
                color: #fff;
                font-family: Oswald;
                font-size: 24px;
                line-height: 24px;
            }

            .text {
                font-size: 24px;
                line-height: 24px;
                height: 24px;
                font-weight: bolder;
            }
        }
    }
}
</style>
